<template>
  <div class="right3">
    <!-- 街道 -->
    <el-table
      :data="tableData"
      ref="tableRef"
      style="width: 100%"
      :max-height="tableH"
      v-if="currentLevel === 1"
    >
      <el-table-column label="序号" prop="index" width="80" align="center">
      </el-table-column>
      <el-table-column label="乡镇" width="140" align="center">
        <template #default="{ row, column }">
          <span class="content-color" @click="columXzClick(row, column)">{{
            row.town
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="发现总数"
        prop="fx"
        align="center"
        sortable
      ></el-table-column>
      <el-table-column
        label="整改总数"
        prop="zg"
        align="center"
        sortable
      ></el-table-column>
      <el-table-column
        label="整改率"
        prop="zgl"
        align="center"
        sortable
        :sort-method="sortByPercentage"
      ></el-table-column>
    </el-table>
    <!-- 村级 -->
    <el-table
      :data="tableDataCun"
      ref="tableRef"
      style="width: 100%"
      :max-height="tableH"
      v-if="currentLevel === 2"
    >
      <el-table-column label="序号" prop="index" width="80" align="center">
      </el-table-column>
      <el-table-column label="街乡镇" width="140" align="center">
        <template #default="{ row, column }">
          <span class="content-color-no-line">{{ row.village }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="发现总数"
        prop="fx"
        align="center"
        sortable
      ></el-table-column>
      <el-table-column
        label="整改总数"
        prop="zg"
        align="center"
        sortable
      ></el-table-column>
      <el-table-column
        label="整改率"
        prop="zgl"
        align="center"
        sortable
        :sort-method="sortByPercentage"
      ></el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { ElButton, ElIcon } from 'element-plus'
import { getBaseInfoHCXzData, getBaseInfoHCCjData } from '@/api/index.js'
import { getDDzxcwgqkMoreData } from '@/api/indexNew.js'
const emits = defineEmits(['updateCurrentQu'])
const props = defineProps({
  xData: {
    type: Array,
    default: () => [],
  },
  sData: {
    type: Array,
    default: () => [],
  },
  data1: {
    type: Array,
    default: () => [],
  },
  data2: {
    type: Array,
    default: () => [],
  },
  tableData: {
    type: Array,
    default: () => [],
  },
  Params: {
    type: Object,
    default: () => {},
  },
})
// const tableColumns = ref([
//   { fixed: false, prop: 'date', label: '日期' },
//   { prop: 'name', label: '姓名' },
//   { prop: 'address', label: '地址' },
// ])
// const tableData = ref([
//   {
//     index: '1',
//     name: 'A',
//     zcount: '1',
//     zccount: '22',
//     yhcount: '33',
//     zgcount: '44',
//     zcl: '6.34%',
//   },
//   {
//     index: '2',
//     name: 'B',
//     zcount: '1',
//     zccount: '22',
//     yhcount: '33',
//     zgcount: '44',
//     zcl: '6.34%',
//   },
//   {
//     index: '3',
//     name: 'C',
//     zcount: '1',
//     zccount: '22',
//     yhcount: '33',
//     zgcount: '44',
//     zcl: '6.34%',
//   },
// ])
const tableH = ref('0px')
const getTableH = () => {
  setTimeout(() => {
    tableH.value = document.querySelector('.table-style').offsetHeight
    return `${tableH.value}px`
  }, 200)
}
const currentLevel = ref(1) // 1 是区县
const tableDataCun = ref([])
const allTitle = ref([])
const columXzClick = async (row, column) => {
  let params = props.Params
  params.code = row.towndm
  allTitle.value.push(row.town)
  let res = await getDDzxcwgqkMoreData(params)
  let list = res.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    return item
  })
  currentLevel.value = 2
  tableDataCun.value = modifiedList
  emitCurrentQu()
}
const emitCurrentQu = () => {
  // 发送自定义事件通知父组件
  emits('updateCurrentQu', allTitle.value, currentLevel.value)
}
const backFn = () => {
  currentLevel.value--
  if (currentLevel.value === 1) {
    allTitle.value = []
    emitCurrentQu()
  }
}
const sortByPercentage = (a, b) => {
  // 去除百分号并转换为数字进行比较
  const numA = parseFloat(a.zcl)
  const numB = parseFloat(b.zcl)
  return numA - numB
}
onMounted(() => {
  getTableH()
  // createScroll()
})
defineExpose({
  backFn,
  currentLevel,
})
</script>
<style scoped lang="scss">
.right3 {
  width: 100%;
  height: 100%;
  flex: 1;
  //   border: 1px solid red;
  // 表格部分样式
  // 最外层透明
  ::v-deep .el-table,
  ::v-deep .el-table__expanded-cell {
    background-color: transparent;
    color: #93dcfe;
    font-size: 2.2rem;
    border-bottom: 1px solid transparent; // 去掉表格体 的 边框
  }
  /* 表格内背景颜色  */
  ::v-deep .el-table {
    th,
    tr,
    td {
      background-color: transparent;
      border: none;
      color: #93dcfe;
      font-size: 2.2rem;
      // height: 5px;
      font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
      font-weight: Normal;
    }
  }
  ::v-deep .el-table__body-wrapper {
    .el-table__body {
      // border: 1px solid red;
      // background-color: red;
      .el-table__row {
        border: 10px solid red;
        // background-color: yellow;
      }
    }
  }
  /* // 设置表格行高度 */
  ::v-deep .el-table__body tr {
    padding: 0;
    height: 54px;
    border: 1px solid red;
  }

  /* // 修改高亮当前行颜色 */
  ::v-deep .el-table tbody tr:hover > td {
    background: #063570 !important;
  }

  /* // 取消当前行高亮 */
  //   ::v-deep .el-table tbody tr {
  //     pointer-events: none;
  //   }

  /* 修改表头样式-加边框 */
  //   ::v-deep .el-table__header-wrapper {
  //      border: solid 1px #04c2ed;
  //   }

  /* // 表格斑马自定义颜色 */
  ::v-deep .el-table__row.warning-row {
    background: #01205a;
  }

  /* 去掉表格里的padding */
  ::v-deep .el-table .cell,
  .el-table th div {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    font-size: 1.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* 自定义内容样式 */
.content-color {
  color: #fff;
  cursor: pointer;
  text-decoration: underline;
}
.custom-column-style {
  color: red;
}
.back {
  display: flex;
  justify-content: flex-end;
}
.content-color-no-line{
  text-decoration: none;
}
</style>
